<template>
  <div class="overview">
    <div class="top">
      <div class="letf">
        <div class="avatar">
          <el-avatar :src="userStore.UserInfo.image_url" :size="80"></el-avatar>
          <span class="department">所属部门：{{ userStore.UserInfo.department || '未填写' }}</span>
          <span class="company">所属公司：{{ companyName }}</span>
        </div>
        <div class="line"></div>
        <div class="info">
          <span>姓名：{{ userStore.UserInfo.name || '未填写' }}</span>
          <span>性别：{{ userStore.UserInfo.sex || '未填写' }}</span>
          <span>权限：{{ userStore.UserInfo.identity || '未填写' }}</span>
        </div>
      </div>
      <div class="right"><adminAndUser></adminAndUser></div>
    </div>
    <div class="mid">
      <div class="left"><category></category></div>
      <div class="right">
        <div class="title">常用管理</div>
        <el-row :gutter="20">
          <el-col :span="6" v-for="item in Svg" :key="item.name">
            <div class="box" @click="toRouter(item)">
              <SvgIcon :name="item.name"></SvgIcon>
              <span>{{ item.title }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="bottom">
      <div class="left">
        <level></level>
      </div>
      <div class="right">
        <loginLine></loginLine>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/user'
// 导入SVG
import SvgIcon from '@/components/SvgIcon.vue'

import adminAndUser from './components/adminAndUser.vue'
import category from './components/category.vue'
import level from './components/level.vue'
import loginLine from './components/line.vue'
import { onMounted, ref } from 'vue'
import { getCompanyNameAPI } from '@/api/company'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
const router = useRouter()

const userStore = useUserStore()
userStore.UserInfo.identity
// 公司名称
const companyName = ref<string>('')
// 获取公司名称
const getCompanyName = async () => {
  const res = await getCompanyNameAPI()
  companyName.value = res.data!
}

// 常用管理数据
const Svg = [
  { name: 'user', title: '用户管理', identity: '用户管理员', path: '/user' },
  { name: 'product', title: '产品管理', identity: '用户', path: '/product' },
  { name: 'message', title: '部门消息', identity: '消息管理员', path: '/adminMessage' },
  { name: 'notice', title: '系统主题', identity: '用户', path: '/home' },
  { name: 'set', title: '系统设置', identity: '用户', path: '/systemSetting' }
]

const toRouter = (item: any) => {
  if (
    userStore.UserInfo.identity === item.identity ||
    userStore.UserInfo.identity === '超级管理员'
  ) {
    router.push(item.path)
  } else {
    ElMessage({ type: 'warning', message: '没有权限' })
  }
}

onMounted(() => {
  getCompanyName()
})
</script>

<style scoped lang="scss">
.overview {
  overflow: hidden;
  height: 100%;
  width: 100%;
  background-color: #eee;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100vh - $base-header-height - $base-breadCrumb-height - 16px);

  .top {
    flex: 1;
    display: flex;
    .letf {
      flex: 1;
      background-color: #fff;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-right: 6px;
      font-size: 14px;
      .avatar {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        span {
          margin: 5px;
        }
      }
      .info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 5px;
        span {
          margin: 5px;
        }
      }
      .line {
        width: 1px;
        height: 60%;
        border: 1px solid #ccc;
      }
    }
    .right {
      flex: 1;
      background-color: #fff;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .user-pie {
        width: 100%;
        height: 100%;
      }
      .box {
        background-color: #ccc;
      }
    }
  }
  .mid {
    margin-top: 6px;
    flex: 1;
    display: flex;
    justify-content: space-between;
    .left {
      margin-right: 6px;
      flex: 1.5;
      background-color: #fff;
      .product-bar {
        width: 100%;
        height: 100%;
      }
    }
    .right {
      flex: 1;
      background-color: #fff;
      padding: 8px;
      display: flex;
      flex-direction: column;
      .title {
        font-size: 15px;
      }
      .box {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        background-color: #ccc;
        padding: 5px 10px;
        span {
          margin-top: 5px;
        }
      }
    }
  }
  .bottom {
    margin-top: 6px;
    flex: 1;
    display: flex;
    justify-content: space-between;
    .left {
      margin-right: 6px;
      flex: 1;
      background-color: #fff;
      .level-pie {
        width: 100%;
        height: 100%;
      }
    }
    .right {
      flex: 2;
      background-color: #fff;
      .login-line {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
